import { history } from 'umi';
import React from 'react';
import { Flex, Button, Divider, Tabbar, NavBar, Form, Input, Dialog } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import { Location, Clock, Chat, QuestionO, Diamond } from '@react-vant/icons';
import './self.less';

const goBack = () => {
  history.back();
}
const goOrderResult = () => {
  history.push('/order-result');
}

export default function SelfPage() {
  const [form] = Form.useForm()
  return (
    <div className='self'>
      <NavBar title='自助下单' leftText='返回' rightText={<Button className='self-help-btn' icon={<QuestionO />} onClick={() =>
        Dialog.alert({
          title: '什么是自助下单？',
          closeable: true,
          theme: 'round-button',
          confirmButtonText: '知道了',
          message: (
            <div style={{ textAlign: 'left', margin: '10px' }}>
              <p>自助下单是区别于从某个陪玩搭档页面直接下单（我们称之为“点单”）的另一种下单方式。</p>
              <p>客户成功下单后，平台入驻陪玩会收到公众号通知，陪玩搭档自主选择报名，官方客服也会帮助客户寻找并沟通符合需求的陪玩来报名。</p>
              <p>客户可通过订单详情页查看已报名的陪玩搭档，挑选心仪的陪玩搭档，进入TA的详情页继续下单。</p>
              <p>自助下单需收取19.9元的服务费。</p>
            </div>
        ),
      })
      }>说明</Button>} onClickLeft={goBack} />
  <div className="container">
    <Flex align="center" className="hd-title mtb10">
      <Flex.Item><Location fontSize='1.25em' className='title-icon' /></Flex.Item>
          <Flex.Item>填写基本信息</Flex.Item>
        </Flex>
        <Form form={form} className='self-form'>
          <Form.Item
            rules={[{ required: true, message: '约玩地点为必填项' }]}
            name='location'
            label='约玩位置'
          >
            <Input placeholder='请填写约玩地点' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '姓名为必填项' }]}
            name='name'
            label='您的姓名'
          >
            <Input placeholder='请填写您的姓名' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '手机号为必填项' }]}
            name='mobile'
            label='手机号码'
          >
            <Input type='tel' placeholder='请填写您的手机号码' />
          </Form.Item>
          <Form.Item
            rules={[{ required: false }]}
            name='duration'
            label='预计时长'
            suffix={<span className='unit'>小时</span>}
          >
            <Input type='number' placeholder='请填写您的预计时长' />
          </Form.Item>
          <Form.Item
            rules={[{ required: false }]}
            name='budget'
            label='每小时预算'
            suffix={<span className='unit'>元/小时</span>}
          >
            <Input type='number' placeholder='请填写每小时预算' />
          </Form.Item>
          <Form.Item
            rules={[{ required: false }]}
            name='requirement'
            label='您的要求'
          >
            <Input.TextArea rows={2} autoSize maxLength={140} showWordLimit
                            placeholder='请填写您的要求' />
          </Form.Item>
        </Form>
      </div>

      <div className='partner-events container'>
        <Flex align='center' className='hd-title mtb10'>
          <Flex.Item><Diamond fontSize='1.25em' className='title-icon' /></Flex.Item>
          <Flex.Item>选择约玩项目</Flex.Item>
        </Flex>
        <div className='event-list choose'>
          <Flex justify='start' gutter={10} wrap='wrap'>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/ce256b9a6227ae7a77f7c470f495e488.png' alt='' />
                <p>线下开黑</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/59809efe258fbcc037298776bdd41b6b.png' alt='' />
                <p>线上陪练</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/a996962cdf0789e3749f11aca41a5b3f.png' alt='' />
                <p>共进晚餐</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/13e9c6b3a1ea7ab9741ff1c8c086bbd5.png' alt='' />
                <p>微醺小酌</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/a20a94966c2fa6dd31413c55334e3894.png' alt='' />
                <p>一起观影</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item active'>
                <img className='type-icon' src='//res.dayupp.com/partner/b7f5ab6607f0da8c930a2d3a1796e800.png' alt='' />
                <p>台球助教</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/d4163e8c1492e1c2af9a2c607d19a74e.png' alt='' />
                <p>密室逃脱</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/fdb0314e3a3eb47e30049f6bb7ff2caa.png' alt='' />
                <p>一起散步</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/ae139c3bd22b33074f047fc6ca06dafe.png' alt='' />
                <p>一起唱歌</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/11915b92953901e2db8264d196cb870d.png' alt='' />
                <p>剧本桌游</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/63b29a07f946cd333358924055733a98.png' alt='' />
                <p>旅游向导</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/1f646b0cead757771829ad5ceb21d8c3.png' alt='' />
                <p>连麦聊天</p>
              </div>
            </Flex.Item>
          </Flex>
        </div>
      </div>
      <div className='partner-time container'>
        <Flex align='center' className='hd-title mtb10'>
          <Flex.Item><Clock fontSize='1.25em' className='title-icon' /></Flex.Item>
          <Flex.Item>选择约玩时间</Flex.Item>
        </Flex>
        <div className='date-list choose'>
          <Flex justify='center' gutter={10} wrap='wrap'>
            <Flex.Item span={8}>
              <div className='item active'>
                <p className='day'>今天</p>
                <p className='date'>2024-06-15</p>
              </div>
            </Flex.Item>
            <Flex.Item span={8}>
              <div className='item'>
                <p className='day'>明天</p>
                <p className='date'>2024-06-16</p>
              </div>
            </Flex.Item>
            <Flex.Item span={8}>
              <div className='item'>
                <p className='day'>后天</p>
                <p className='date'>2024-06-17</p>
              </div>
            </Flex.Item>
          </Flex>
        </div>
        <Divider className='choose-time'>请选择大概时间段</Divider>
        <div className='time-list choose'>
          <Flex justify='center' gutter={10} wrap='wrap'>
            <Flex.Item span={8}>
              <div className='item active'>
                <p>现在</p>
              </div>
            </Flex.Item>
            <Flex.Item span={8}>
              <div className='item'>
                <p>11:00 ~ 14:00</p>
              </div>
            </Flex.Item>
            <Flex.Item span={8}>
              <div className='item'>
                <p>14:00 ~ 17:00</p>
              </div>
            </Flex.Item>
            <Flex.Item span={8}>
              <div className='item'>
                <p>17:00 ~ 20:00</p>
              </div>
            </Flex.Item>
            <Flex.Item span={8}>
              <div className='item'>
                <p>20:00 ~ 23:00</p>
              </div>
            </Flex.Item>
            <Flex.Item span={8}>
              <div className='item'>
                <p>23:00 ~ 02:00</p>
              </div>
            </Flex.Item>
          </Flex>
        </div>
      </div>
      <div className='partner-submit-bar'>
        <Tabbar placeholder>
          <div className='container'>
            <Flex align='center' justify='between' className='submit-area'>
              <Flex.Item>
                <Button round plain className='btn-service' color='#43cf7c' size='small' icon={<Chat />}>客服</Button>
              </Flex.Item>
              <Flex.Item>
                <Flex align='center'>
                  <Flex.Item className='submit-label'>服务费：</Flex.Item>
                  <Flex.Item className='submit-price'>¥<span>19</span>.90</Flex.Item>
                  <Flex.Item className='submit-label'>元</Flex.Item>
                  <Flex.Item><Button className='submit-btn' round type='primary'
                                     color='linear-gradient(to right, #ff78b7, #ff5959)' onClick={goOrderResult}>立即下单</Button></Flex.Item>
                </Flex>
              </Flex.Item>
            </Flex>
          </div>
        </Tabbar>
        <SafeArea position='bottom' />
      </div>
    </div>
  );
}
